<template>
  <div class="signPage">
    <div class="user_card">
      <template>
        <img src="@/assets/img/bg_top up@2x.png" alt="" class="bgclass"/>
        <div class="left">
          <img src="@/assets/img/icon_boy.png" alt="" v-if="userInfo.sex == '1'"/>
          <img src="@/assets/img/icon_girl.png" alt="" v-else>
          <span>{{
              userInfo.name
            }}</span>
        </div>
      </template>
    </div>
    <div class="signBox">
      <div class="signBox_item" v-for="item in list" v-if="list.length > 0">
        <div class="signBox_item_div1">医生：{{ item.doctname }}</div>
        <div class="signBox_item_div1">科室：{{ item.deptname }}</div>
        <div class="signBox_item_div1">预约时间：{{ item.regDate }}</div>
        <div class="signBox_item_div1">签到时间：{{ item.signDate }}</div>
        <div class="signBox_item_div2">备注：{{ item.mark }}</div>
        <div class="signBox_item_status">
          <span :style="{ color: item.isRegister == '未签到' ? '#F72D23' : '#A4ADBE' }">{{
              item.isRegister
            }}</span>
        </div>
        <div class="signBox_item_div2 signButton"
             @click="signFun(item.buttonText,item.clinicCode)" v-if="item.buttonState=='1'">
          {{ item.buttonText }}
        </div>
        <!--        <div class="signBox_item_div2 signButton"-->
        <!--             v-else>-->
        <!--          {{ item.buttonText }}-->
        <!--        </div>-->
      </div>
      <div class="noresult" v-else>
        <img src="@/assets/img/img_no results@2x.png" alt=""/>
        <div>暂无记录</div>
      </div>
    </div>
    <!--    <div class="sign_tips">-->
    <!--      完成检查、检验后需重新扫码进行回诊签到，以便医生知晓-->
    <!--    </div>-->
  </div>
</template>
<script>
import {getOutpatientBySfzToday, updateIsRegister} from "@/api/api";

export default {
  data() {
    return {
      userInfo: {},
      list: [],
      isSign: false,
      type: "0"
    };
  },
  created() {
    if (window.localStorage.getItem("signUserInfo")) {
      this.userInfo = JSON.parse(window.localStorage.getItem("signUserInfo"));
    }
    this.getOutpatientBySfzToday()

  },

  methods: {
    getOutpatientBySfzToday() {
      if (!this.$route.query.idNo) {
        alert("未获取到身份证号,请重新扫码签到")
        this.$router.go(-1)
        return
      }
      this.isSign = false

      getOutpatientBySfzToday({
        "idcardNo": this.$route.query.idNo,
        "deptQrCode": this.$route.query.deptQrCode
      }).then(res => {
        if (res.code == 200) {
          this.list = res.data
          this.list.forEach(element => {
            if (element.isRegister === "未签到") {
              this.isSign = true
              console.log("isSign==true")
            } else if (element.isRegister.startsWith("无法") || element.isRegister.startsWith("无需")) {
              //无需签到(现场挂号)   无法签到
              return;
            } else {
              this.type = "1"
            }
          });

        }
      }).catch(() => {

      })
    },
    updateIsRegister(buttonText, clinicCode) {
      var type = "0";
      if (buttonText === "回诊签到") {
        type = "1";
      }
      updateIsRegister({
        "idcardNo": this.$route.query.idNo,
        "deptQrCode": this.$route.query.deptQrCode,
        "type": type,
        "clinicCode": clinicCode
      }).then(res => {
        if (res.code == 200) {
          this.getOutpatientBySfzToday()
          this.$vux.toast.show(buttonText + "成功");
        }
      })
    },
    signFun(buttonText, clinicCode) {
      const that = this;
      this.$vux.confirm.show({
        // 组件除show外的属性
        content: "确认签到？",
        onCancel() {
        },
        onConfirm() {
          that.updateIsRegister(buttonText, clinicCode)
        },
      });
    }

  },
};
</script>
<style lang="less" scoped>
.signPage {

  // padding-top: 1rem;
  // padding-bottom: 5rem;
  height: calc(~"100vh");
  overflow-y: hidden;
  background-color: #F4F8FC;
}

.user_card {
  margin: 1rem 1rem 1rem 1rem;
  position: relative;
  height: 3.13rem;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .left {
    display: flex;
    align-items: center;
    position: relative;
    font-size: 1.06rem;
    font-family: PingFang SC;
    font-weight: bold;
    color: #ffffff;

    img {
      margin: 0 0.94rem;
      width: 1.44rem;
      height: 1.44rem;
    }
  }

  .right {
    width: 4.5rem;
    color: #ffffff;
    position: relative;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  .right img {
    width: 0.50rem;
    height: 0.81rem;
    position: relative;
    margin: 0 0.75rem;
  }

  .bgclass {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0.31rem;
  }
}

.signBox {
  height: calc(~"100vh - 10rem");
  overflow-y: scroll;
  padding-bottom: 5rem;

  &_item {
    margin: 0.75rem 1rem;
    padding: 0.625rem 1rem;
    //height: 7rem;
    background: #FFFFFF;
    box-shadow: 0.00rem 0.00rem 0.63rem 0.00rem rgba(174, 206, 254, 0.2400);
    border-radius: 0.38rem;
    position: relative;
    display: flex;
    // align-items: center;
    flex-flow: column;
    justify-content: space-around;

    &_div1 {
      line-height: 1.75rem;
      font-size: 0.94rem;
      font-family: PingFang SC;
      font-weight: 500;
      color: #131A2A;
    }

    &_div2 {
      line-height: 1.75rem;
      font-size: 0.88rem;
      font-family: PingFang SC;
      font-weight: 500;
      color: indianred;

    }

    &_status {
      position: absolute;
      right: 1rem;
      top: 1rem;
      font-size: 0.88rem;
      font-family: PingFang SC;
      font-weight: 500;
    }
  }
}

.signCon {
  width: calc(~"100% - 2rem");
  margin: 0 1rem;
  position: fixed;
  //line-height: 2.75rem;
  bottom: 1rem;
  text-align: center;
  height: 2.75rem;
  background: #FFFFFF;
  //border: 0.06rem solid #448EFF;
  //border-radius: 0.19rem;
  font-size: 18px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #448EFF;
}

.sign_tips {
  width: calc(~"100% - 2rem");
  margin: 0 1rem;
  position: fixed;
  bottom: 1rem;
  text-align: center;
  //opacity: 0;
  font-size: 18px;
  font-family: PingFang SC;
  font-weight: 500;
  color: indianred;
}

.signButton {
  line-height: 2.75rem;
  bottom: 1rem;
  text-align: center;
  height: 2.75rem;
  background: #FFFFFF;
  border: 0.06rem solid #448EFF;
  border-radius: 0.19rem;
  font-size: 18px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #448EFF;
}

.noresult {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
  height: 31.25rem;
}

.noresult img {
  display: block;
  width: 12.5rem;
  height: 9.75rem;
}
</style>
